<template>
  <div>
    <el-button type="primary" @click="tianjia()">添加我的车牌号</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%">-
      <el-table-column
          fixed
          prop="plate_number"
          label="车牌号"
          width="600">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="sahnchu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        title="修改车牌"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="车牌号">
            <el-input v-model="form.plate_number"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="xiugai()">修改</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="添加车牌号"
        :visible.sync="dialogVisibles"
        width="60%"
        :before-close="handleClose">
      <span>
        <el-form ref="form" :model="forms" label-width="80px">
          <el-form-item label="车牌号">
            <el-input v-model="forms.plate_number"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="tianjia()">添加</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
name: "cheliang",
  methods: {
    async handleClick(row) {
      console.log(row.id);
      this.dialogVisible = true
      const ress = await this.$http.get('chepai/'+row.id+'/')
      console.log(ress.data.plate_number)
      this.form.plate_number = ress.data.plate_number
      this.id = ress.data.id
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(err => {
            console.log(err)
          });
    },
    async sahnchu(row){
      console.log(row)
      const res = await this.$http.delete('chepai/'+row.id+'/')
      console.log(res)
      if(res.status==204){
        this.$message.info("删除成功")
        this.getdatas()
      }
      // if(res)

    },
    async getdatas() {
      const res = await this.$http.get('chepai/',{
        params: {
          "token":window.localStorage.getItem("token")
        }
      })
      this.tableData = res.data
    },
    async xiugai(){
      const res = await this.$http.patch('chepai/'+this.id+'/',this.form)
      console.log(res)
      if(res.status==200){
        this.$message.warning("修改成功")
        this.dialogVisible = false
        this.getdatas()
      }
    },
    async tianjia(){
      this.dialogVisibles = true
      const res = await this.$http.post('chepai/',this.forms)
      console.log(res)
      if(res.status==201){
        this.$message.success("创建成功")
        this.dialogVisibles = false
        this.getdatas()
      }
    }
  },
  mounted() {
    this.getdatas()
  },
  data() {
    return {
      dialogVisibles: false,
      id:1,
      tableData: [],
      dialogVisible: false,
      form: {
        plate_number: '',
      },
      forms: {
        plate_number: '',
        token: window.localStorage.getItem("token"),
        users: 1,
      }
    }
  }
}
</script>

<style scoped>

</style>
